<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>sharePage3</title>
    <link rel="stylesheet" href="static/sharePage3.css" />
  </head>
  <body>
    <header>
      <div class="h_div">
        <img src="static/images/left.png" alt="" />
        <h1>Invite friends</h1>
      </div>
    </header>

    <div class="card">
      <p class="p_h">Download now to earn up to</p>
      <div class="star"><strong>120</strong><i></i></div>
      <p class="copied" style="display: none">Invitation code copied</p>
      <p class="p_h2">Unlock All Novels</p>
      <div class="inviteCode"><em>Invitation Code:&nbsp;</em><span class="yqm">85BZ9</span><i onclick="copyInviteCode()"></i></div>
      <div class="btn" onclick="copyInviteCode()">
        <img src="static/images/btn.png" alt="click" />
        <img class="finger" src="static/images/click.png" alt="" />
        <span class="inviteNow">Download to Earn points</span>
      </div>
    </div>
    <div class="footer">
      <div class="rewards">
        <p class="p1">Hot novel</p>
        <ul>
          <li>
            <img src="" alt="" />
            <div class="book">
              <h3>Dragon King Palace</h3>
              <p>Elvina memegang telepon genggam, wajahnya yang pucat menjadi sedikit merah, setelah sakit …</p>
              <span class="span_t"><em>Cool story</em><em>Cool story</em></span>
            </div>
          </li>
          <li>
            <img src="" alt="" />
            <div class="book">
              <h3>Dragon King Palace</h3>
              <p>Elvina memegang telepon genggam, wajahnya yang pucat menjadi sedikit merah, setelah sakit …</p>
              <span class="span_t"><em>Cool story</em><em>Cool story</em></span>
            </div>
          </li>
          <li>
            <img src="" alt="" />
            <div class="book">
              <h3>Dragon King Palace</h3>
              <p>Elvina memegang telepon genggam, wajahnya yang pucat menjadi sedikit merah, setelah sakit …</p>
              <span class="span_t"><em>Cool story</em><em>Cool story</em></span>
            </div>
          </li>
        </ul>
      </div>
      <div class="down_app">
        <a href="" class="d_app">Download the App to read more</a>
      </div>
    </div>
  </body>
  <script>
    function init() {
      var width = document.documentElement.clientWidth;
      document.documentElement.style.fontSize = width / 7.5 + "px";
    }
    init();
    window.addEventListener("orientationchange", init);
    window.addEventListener("resize", init);

    //邀请码复制
    function copyInviteCode() {
      var inviteCode = document.querySelector(".yqm");
      var tempInput = document.createElement("input");
      var copied = document.querySelector(".copied");
      tempInput.value = inviteCode.textContent;
      document.body.appendChild(tempInput);
      tempInput.select();
      document.execCommand("copy");
      document.body.removeChild(tempInput);

      copied.style.display = "block";
      setTimeout(function () {
        copied.style.display = "none";
      }, 1000);
    }

    //手指图片
    const img = document.querySelector(".finger");
    let isVisible = true;
    setInterval(() => {
      if (isVisible) {
        img.style.display = "none";
      } else {
        img.style.display = "block";
      }
      isVisible = !isVisible;
    }, 500);
  </script>
</html>
